<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title>案例展示</title>
		<link rel="stylesheet" type="text/css" href="css/case.css" />
		<link rel="stylesheet" href="css/index-top.css">
		<script src="js/vue.global.prod.js"></script>
	</head>
	<body>
		<script src="./js/jquery.js"></script>
		<script>
			$(function() {
				
				var listindex = $('.team-cont dl').length
				// alert(listindex)
				$('.img-change').addClass('hide')
				$('.aa').addClass('hide')
				$('.exhibition-cont dl').on('click',function(){
					$('.img-change').toggleClass('show')
					$('.aa').toggleClass('show')
				})
				$('.aa').on('click',function(){
					$('.img-change').toggleClass('show')
					$('.aa').toggleClass('show')
				})
				
				pageControl('#img-change')
				// 切换消息页面
				function pageControl(id) {
					// 箭头的展示
					function arrowShow() {
						if (currentIndex === pageLength - 1) {
							$('.i-prev').removeClass('disable')
							$('.i-next').addClass('disable')
						} else if (currentIndex === 0) {
							$('.i-prev').addClass('disable')
							$('.i-next').removeClass('disable')
						} else if (0 < currentIndex < pageLength - 1) {
							$('.i-prev').removeClass('disable')
							$('.i-next').removeClass('disable')
						}
					}
					var newsLi = $(id + ' .news-group li')
					var pageLi = $(id + ' .page-control li')
					var pageLength = pageLi.length
					var currentIndex = $(id + ' .page-control li.active').index()
					if (currentIndex === 0) {
						$('.i-prev').addClass('disable')
					}
					pageLi.on('click', function() {
						var index = $(this).index()
						$(this).addClass('active').siblings().removeClass('active')
						newsLi.eq(index).removeClass('hide').siblings().addClass('hide')
						currentIndex = index
						arrowShow()
					})
					// 上一张
					$('.i-prev').on('click', function() {
						if (currentIndex !== 0) {
							var prevIndex = currentIndex - 1
							pageLi.eq(prevIndex).addClass('active').siblings().removeClass('active')
							newsLi.eq(prevIndex).removeClass('hide').siblings().addClass('hide')
							currentIndex = prevIndex
							arrowShow()
						}
					})
					// 下一张
					$('.i-next').on('click', function() {
						if (currentIndex !== pageLength - 1) {
							var nextIndex = currentIndex + 1
							pageLi.eq(nextIndex).addClass('active').siblings().removeClass('active')
							newsLi.eq(nextIndex).removeClass('hide').siblings().addClass('hide')
							currentIndex = nextIndex
							arrowShow()
						}
					})
				}

			})
		</script>
		<div id="wen">
			<!-- 弹出层 -->
			<div :class="['Popup',ishow?'openActive':'']">
				<div class="tiantop">
					<div class="tuimgg">
						<a href="./index.html"><img src="./img/qqqw.png" alt="" class="we"><img src="./img/xiang.png"
								alt=""></a><span>小象服装</span>
					</div>
					<div @click="dengqu"><img style="width: 35px;margin-top: 11px;" src="img/c.png" alt=""></div>
				</div>
				<div style="border-top: 2px saddlebrown solid;width: 100%; margin-bottom: 25px;"></div>
		
				<div class="from">
					<div class="zuo-from">
						<div class="denglu">
							登录
						</div>
						<div class="shuru">
							<div>区号</div>
							<div class="phonp"><span>中国 (+86)</span><input type="text" /><select name="111"
									id=""></select>
							</div>
							<div class="phonp"><span>电话号码*</span><input type="text" /></div>
							<div class="phonp"> <span>输入密码*</span><input type="password" /></div>
							<div class="wang"><a href="#">忘记密码?</a></div>
							<div class="danxuan">
								<div class="dui" @click="danxuan"><img src="img/dui.png" alt="" v-if='xiao'></div>
								<span>记住我</span>
							</div>
							<button class="sutter" @click="dengqu">登录</button>
						</div>
					</div>
					<div class="you-from">
						<div class="denglu">
							创建账户
						</div>
						<ul class="lie">
							<li>将您心仪的商品加入收藏夹、</li>
							<li>保存您的联系人信息以进行快速结算。</li>
							<li>关注您的订单状态。</li>
						</ul>
						<button class="suter">创建账户</button>
					</div>
				</div>
			</div>
			<div :class="['Popup',isho?'openActive':'']">
				<div class="hui">
		
				</div>
				<div class="tiantopp">
					<div class="tuimggg">
						<a href="./index.html"><img src="./img/qqqw.png" alt="" class="we"><img src="./img/xiang.png"
								alt=""></a><span>小象服装</span>
					</div>
					<div @click="shouqu"><img style="width: 35px;margin-top: 11px;" src="img/c.png" alt=""></div>
				</div>
				<div class="dier"></div>
		
				<div class="shou">
					<div class="lift-zuo">
						<p style="font-weight: 600;">不要错过您心仪的商品</p>
						<p style="font-size: 13px;margin-top: 16px;">线上精品店注册，您可以随时访问您的心愿清单并查看心
							仪商品</p>
						<button class="dengl">登录</button>
						<button class="dengl">注册</button>
					</div>
					<div class="lift-you">
						<h3>心愿清单</h3>
						<p style="margin-top: 15px;">您的心愿清单中暂无商品</p>
						<button class="dengll" @click="shouqu">继续购物</button>
					</div>
				</div>
		
			</div>
			<div :class="['Popup',ish?'openActive':'']">
				<div class="tiantop">
					<div class="tuimgg">
						<a href="./index.html"><img src="./img/qqqw.png" alt="" class="we"><img src="./img/xiang.png"
								alt=""></a><span>小象服装</span>
					</div>
					<div @click="gouqu"><img style="width: 35px;margin-top: 11px;" src="img/c.png" alt=""></div>
				</div>
				<div style="border-top: 2px saddlebrown solid;width: 100%; margin-bottom: 25px;"></div>
				<div class="zuob">
					<h3>您的购物袋</h3>
					<p style="margin-top: 15px;">您的购物袋中设有商品</p>
					<button class="dengll" @click="gouqu">继续购物</button>
					<p style="margin-top: 50px;">最近浏览</p>
				</div>
			</div>
			<!-- top -->
			<div class="head">
				<div class="header">
					<div class="tuimg">
						<a href="./index.html"><img src="./img/qqqw.png" alt="" class="we"><img src="./img/xiang.png"
								alt=""></a><span>小象服装</span>
					</div>
					<div class="noe">
						<img src="./img/qwe.png" alt="" @click="dan">
					</div>
					<div class="zhong">
						<button>搜 索</button>
						<input type="text" />
					</div>
					<div class="right-box">
						<div class="right-box-right" @click="deng"> <img src="img/me1.jpg" alt=""><span>登录</span>
						</div>
						<div class="right-box-right" @click="shou"> <img src="img/shou.png" alt=""><span>我的收藏</span>
						</div>
						<div class="right-box-right" @click="gou"><img src="img/gou.png" alt=""> <span>我的购物袋</span>
						</div>
					</div>
				</div>
			</div>
		
		
		
		
			<div :class="['Popups',iqoo?'openActive':'']">
				<div class="tiantop">
					<div class="tuimgg">
						<a href="./index.html"><img src="./img/xiang.png" alt=""></a><span>小象服装</span>
					</div>
					<div @click="iqooqu"><img style="width: 35px;margin-top: 11px;" src="img/c.png" alt=""></div>
				</div>
				<div class="daoh"><a href="./index.html">首页</a></div>
				<div class="daoh"> <a href="./new.html">新季新品</a></div>
				<div class="daoh"> <a href="case.html">案例展示</a></div>
				<div class="daoh"> <a href="trend.html">潮流资讯</a></div>
				<div class="daoh"><a href="customized.html">预约制定</a></div>
				<div class="daoh"><a href="brand.html">品牌理念</a></div>
				<div class="daoh"><a href="conteact.html">联系我们</a></div>
			</div>
		
			<!-- 导航 -->
			<div class="box-nav">
				<div class="nav">
					<ul>
						<li><a href="index.html">首页</a></li>
						<li><a href="new.html">新季新品</a></li>
						<li class="p"><a href="case.html">案例展示</a></li>
						<li><a href="trend.html">潮流资讯</a></li>
						<li><a href="customized.html">预约制定</a></li>
						<li><a href="brand.html">品牌理念</a></li>
						<li><a href="conteact.html">联系我们</a></li>
					</ul>
				</div>
			</div>
		</div>
		<div class="case">
			<div class="case-cont">
				<img src="img/casebanner.png" width="100%" />
				<!--新款设计-->
				<div class="dresign com-center flex">
					<div class="dresign-left">
						<div>
							<div class="title">
								案例展示
								<span>Fashion clothes</span>
								<div class="black"></div>
							</div>
							<p> 精致的缝纫工艺<br />
								有着多年操作经验的老师傅一针一线精心缝制<br />
								比一般的缝制规格超出很多，针线不仅细腻关观<br />
								更大大提高了上衣的坚韧和耐用性。<br />
								公司拥有20年针织服装出口优秀服装设计师、<br />
								并迅速集结了一群年轻、热爱时尚行业的精英团队<br />
							</p>
						</div>
						<img src="img/dresign1.png" class="pc" width="100%" />
						<img src="img/dresign2phone.png" class="phone" />
					</div>
					<div class="dresign-right flex">
						<div class="flex-column">
							<img src="img/dresign2.png" class="pc" />
							<img src="img/dresign1phone.png" class="phone">
							<img src="img/dresign3.png" style="margin-top: 4px;">
						</div>
						<div class="flex-column">
							<img src="img/dresign4.png">
							<img src="img/dresign5.png">
						</div>
					</div>
				</div>
				<!--多弹窗切换效果-->
				<div class="aa"></div>
				<div id="img-change" class="img-change">
					<div class="con com-center">
						<ul class="news-group flex">
							<li class="news-item">
								<div class="imgbox">
									<img src="./img/exhibitionconts3.png" alt="">
								</div>
							</li>
							<li class="news-item hide">
								<div class="imgbox">
									<img src="./img/exhibitionconts2.png" alt="">
								</div>
							</li>
							<li class="news-item hide">
								<div class="imgbox">
									<img src="./img/exhibitionconts3.png" alt="">
								</div>
							</li>
							<li class="news-item hide">
								<div class="imgbox">
									<img src="./img/exhibitionconts2.png" alt="">
								</div>
							</li>
						</ul>
						<div class="page-control clearfix">
							<div class="page-con flex">
								<i class="i-prev">
									<img src="./img/i-prev.png" width="100%" height="100%" alt="">
								</i>
								<ul class="clearfix">
									<li class="active">1</li>
									<li>2</li>
									<li>3</li>
									<li>4</li>
								</ul>
								<i class="i-next">
									<img src="./img/i-next.png" width="100%" height="100%" alt="">
								</i>
							</div>
						</div>
					</div>
				</div>
				<!--个性展示-->
				<div class="exhibition com-center">
					<div class="title">
						个性展示
						<img src="./img/exhibition.png" alt="个性展示（线）" width="100%">
					</div>
					<div class="exhibition-cont flex">
						<dl>
							<dt>
								<img src="./img/exhibitioncont1.png" alt="" width="100%">
								<img src="./img/exhibitioncont.png" width="22%" class="circle" alt="个性展示（圈圈）">
								<div class="enlarge">
									<img src="./img/enlarge.png" width="10%" alt="">
								</div>
							</dt>
							<dd>羊羔毛外套</dd>
						</dl>
						<dl>
							<dt>
								<img src="./img/exhibitioncont2.png" alt="" width="100%">
								<img src="./img/exhibitioncont.png" width="22%" class="circle" alt="个性展示（圈圈）">
								<div class="enlarge">
									<img src="./img/enlarge.png" width="10%" alt="">
								</div>
							</dt>
							<dd>羊羔毛卫衣</dd>
						</dl>
						<dl>
							<dt>
								<img src="./img/exhibitioncont3.png" alt="" width="100%">
								<img src="./img/exhibitioncont.png" width="22%" class="circle" alt="个性展示（圈圈）">
								<div class="enlarge">
									<img src="./img/enlarge.png" width="10%" alt="">
								</div>
							</dt>
							<dd>韩版外套</dd>
						</dl>
						<dl>
							<dt>
								<img src="./img/exhibitioncont4.png" alt="" width="100%">
								<img src="./img/exhibitioncont.png" width="22%" class="circle" alt="个性展示（圈圈）">
								<div class="enlarge">
									<img src="./img/enlarge.png" width="10%" alt="">
								</div>
							</dt>
							<dd>套头卫衣</dd>
						</dl>
					</div>
				</div>
				<!--/个性展示-->
				
				<div class="bg-change">
					<div class="ensure flex">
						<img src="img/ensure.png" width="50%" height="320px" />
						<div class="ensure-cont">
							<div class="title">
								质量保证
								<span>quality assurance</span>
								<div class="black"></div>
							</div>
							<p>一直坚信品质是品牌的基础，品质是客户生命的保障，公司研发、生
								产、服务等相关人员以高度的责任感和使命感，充分调察每一处点滴
								细节，从分立物料到产品集成，都注立了严格的质量标准，并得到了
								有效执行，以优秀的品质和成熟的管理体系赢得了国际权威认证机构
								的认可。</p>
						</div>
					</div>
				</div>
			</div>
			
			<div class="foot">
				<div class="foot1">
					<div class="zuo">
						<span><img src="./img/qie.png" alt="" style="width: 20px;height: 20px;margin-top: 5px;">在线客服</span>
						<p>热线电话:123456789123</p>
						<p>工作时间:周一到周五9:00-8:00</p>
						<p>办公地址:山东省泰安市XX区XX街道</p>
					</div>
					<div class="you">
						<img src="./img/333.png" alt=""><span>扫码关注</span>
					</div>
				</div>
				<div class="foot2">
					<fOrm>
						<div class="san"><input type="text" placeholder="* 请输入你的名字"> <input type="text"
								placeholder="* 请输入你的细节要求">
							<input type="text" placeholder="* 请输入你的电话">
						</div>
						<div><textarea name="" id="" cols="30" rows="10" placeholder=" 请输入你的详细地址"></textarea></div>
						<div><button>马上提交</button></div>
					</fOrm>
				</div>
			</div>
			<div class="footss">
				<div class="foots">
					<div class="foots-zuo">
						<span class="span1"><img src="./img/qie.png" alt=""
								style="width: 20px;height: 20px;margin-top: 5px;">在线客服</span>
						<div class="yoo-item">
							<img src="./img/333.png" alt="">
							<span class="yoo-item-zi">扫码关注</span>
						</div>
					</div>
					<div class="foots-zhong">
						<input type="text" placeholder="* 请输入你的名字"> <input type="text" placeholder="* 请输入你的细节要求">
						<input type="text" placeholder="* 请输入你的电话">
					</div>
					<div class="foots-you">
						<div><textarea class="duoshu" name="" id="" cols="30" rows="10" placeholder=" 请输入你的详细地址"></textarea>
						</div>
						<input type="submit" name="" id="">
						<div><button>马上提交</button></div>
					</div>
				</div>
				<div class="ziti">
					<div>热线电话:123456789123</div>
					<div>工作时间:周一到周五9:00-8:00</div>
					<div>办公地址:山东省泰安市XX区XX街道</div>
				</div>
			
			</div>

		</div>
	</body>
	<script>
		const App = {
			data() {
				return {
					ishow: false,
					isho: false,
					ish: false,
					xiao: false,
					iqoo: false
				}
			},
	
			methods: {
				deng: function() {
					this.ishow = true
				},
				shou: function() {
					this.isho = true
				},
				gou: function() {
					this.ish = true
				},
				dengqu: function() {
					this.ishow = false
				},
				shouqu: function() {
					this.isho = false
				},
				gouqu: function() {
					this.ish = false
				},
				danxuan() {
					this.xiao = !this.xiao
				},
				dan() {
					this.iqoo = true
				},
				iqooqu: function() {
					this.iqoo = false
				},
			},
		};
		Vue.createApp(App).mount('#wen');
		var mySwiper = new Swiper('.swiper', {
			loop: true, // 循环模式选项
			autoplay: true,
			// 如果需要分页器
			pagination: {
				el: '.swiper-pagination',
			},
			// 如果需要前进后退按钮
			navigation: {
				nextEl: '.swiper-button-next',
				prevEl: '.swiper-button-prev',
			},
			// 如果需要滚动条
			scrollbar: {
				el: '.swiper-scrollbar',
			},
		})
	</script>
</html>
